<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">		
	<title>22580</title>
	<style>
        html,body,article,footer,header,p,img{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
        article,footer,header{display:block}
        a{text-decoration: none;-webkit-user-select: none;}
        html,body{height: 100%;-webkit-touch-callout: none;}
        /*base*/
        header{position: relative;width: 100%;height: 3em;background:#c93811;background-size:auto 2.7em;line-height:3em;font-size: 0.88em;color: #fff;text-indent: 0.83em;font-family: STHeitiSC,arial;-webkit-user-select: none;}
        header a{position: absolute;right: 0.71em;top: 50%;margin-top: -1.2em;height: 2.14em;line-height: 2.5em;padding: 0 0.71em 0 2.14em;background: #fff url(img/appdown.png) 0.71em center  no-repeat;background-size:auto 1.36em ;border-bottom: 2px solid #d5d5d5;border-radius: 0.36em;color: #c93811;text-decoration: none;text-indent: 0;font-size: 1em;}
        .banner{overflow: hidden;position: relative;-webkit-user-select: none;height: 9.06em;}
        .banner .banner_img{width: 100%;}
        .banner .title{position: absolute;bottom: 0;height: 2.93em;width: 100%;font-size: 0.94em;line-height: 2.93em;color: #fff;text-indent: 4.27em;}
        .banner .title p{position: relative;height: 2.93em;width: 100%;font-size: 1em;background-color: rgba(0,0,0,.75);line-height: 2.93em;color: #fff;text-indent: 4.27em;/*-webkit-filter: blur(3px)*/;z-index: 2;}
        .banner .title img.use{position: absolute;left: 0.4em;top: -1.33em;width: 3.3em;height: 3.3em;border-radius: 3em;border:0.33em solid rgba(0,0,0,.75);z-index: 3;background-color: rgba(0,0,0,.75);}

        .letter {height: 7.5em;margin:0 1.5em;padding: 5.5em  0;font-size: 0.88em;line-height: 1.43em;color: #333;}
        .letter p{margin-bottom: 1.43em;}
        .letter hr{border:1px dashed #999;border-right: 0 none;border-left: 0 none;margin-bottom: 1em;}
        article{font-size: 1em;padding: 0 0.63em;}   
        article dl{margin: 0;}
        article dt{font-size: 0.81em;line-height: 3em;border-bottom: 1px solid #e5e5e5;}
        article dd{height: 2.75em;padding: 0.38em 0;line-height: 2.75em;margin: 0;border-bottom: 1px solid #e5e5e5;vertical-align: middle;}
        article dd.lock{background: url(img/lock.png) right center no-repeat;background-size:1em auto;}
        article dd img{height: 2.75em;width: 2.75em;margin-right: 0.63em;vertical-align: middle;border-radius: 0.5em}
        article dd a{display: block;font-size: 0.88em;color: #000;}
        article dt a{display: block;color: #a0a0a0;-webkit-user-select: none;}
        .tac{text-align: center;}
        .tar{text-align: right;}
        footer{height: 5.63em;line-height: 5.63em;font-size: 0.5em;color: #aaa;text-align: center;font-family: arial;}
        footer a{color: #aaa}
        .twodcode{padding-top: 0.75em;width: 40%;}
        .more{display: inline-block;overflow: hidden;height: 1.57em;line-height: 1.87em;font-size: 0.88em;color: #e02f00}
        .pop_wrap{position: fixed;top: 0;left: 0;min-height: 100%;height: 100%;min-width: 100%;background-color: rgba(0,0,0,.7);z-index: 1200;-webkit-user-select: none;}
       .pop_wrap .pop{position: absolute;left: 50%;top: 50%;height: 7em;width: 88%;margin-left:-44%;margin-top: -4.5em;padding: 1em 0 1.88em;background-color: #fff;border-radius: 0.63em}
       .pop_wrap .pop .close{position: absolute;top: -.8em;left: -.8em;width: 1.56em;height: 1.56em;line-height: 1.56em;font-size: 1em;background-color: #d6441c;border-radius: 1em;text-align: center;color: #fff;font-weight: 700;font-family: STXihei;box-shadow: 1px 1px 5px #666}
       .pop_wrap .pop .title{height: 2.06em;font-size: 1em;text-align: center;color: #1f1f1f;}
       .pop_wrap .pop input[type="text"]{display: block;width: 85%;margin: auto;height: 2.43em;margin-bottom: 0.63em;border-radius: 1.5em;border:1px solid #eee;background-color: #fff;font-size: 0.88em;box-shadow: inset 1px 0 5px #eee}
       .pop_wrap .pop .certain{display: inline-block;height: 2.57em;padding: 0 1.43em 0 1.79em;border-radius: 1.25em 0 0 1.25em;line-height: 2.57em;background-color: #d6441c;font-size: 14px;color: #fff}
       .fn_hide{display: none;}
    </style>
</head>
<body>
    <header>
        <p>应用包-您的专属App Store！</p>
        <a href="">下载应用</a>
    </header>
    <div class="banner">
        <img src="img/banner.jpg" alt="应用包" class="banner_img">
        <div class="title">
        <img src="http://photo.025.com/photoserver/photo/2014/2/25/19cbb88379c64721addffcbd93106d12.jpg" alt="绿色心情shinly" class="use">
        <p>绿色心情shinly</p>
      </div>
    </div>
    <article>
        <dl>
            <dt><a href="javascript:">创建的应用包(35)</a></dt>
            <dd><a href=""><img src="img/keep.png" alt="我的收藏">我的收藏</a></dd>
            <dd><a href=""><img src="img/local.png" alt="本机应用">本机应用</a></dd>
            <dd class="lock"><a href=""><img src="img/lvzi.png" alt="那些经典的塔防游戏">那些经典的塔防游戏</a></dd>
        </dl>
        <dl>
            <dt><a href="javascript:">收藏的应用包(15)</a></dt>
            <dd class="lock"><a href=""><img src="img/lvzi.png" alt="那些经典的塔防游戏">那些经典的塔防游戏</a></dd>
            <dd class="lock"><a href=""><img src="img/lvzi.png" alt="那些经典的塔防游戏">那些经典的塔防游戏</a></dd>
            <dd class="lock"><a href=""><img src="img/lvzi.png" alt="那些经典的塔防游戏">那些经典的塔防游戏</a></dd>
        </dl>
        <p class="tac pt12"><a href=""><img class="twodcode" src="img/twodcode.png" alt="扫描下载iPhone版应用包"></a></p>
        <p class="tar"><a href="" class="more">了解应用包>></a></p>
    </article>
    <footer>COPYRIGHT© 2012 广东利为网络科技有限公司  All Rights Reversed</footer>
    <div class="pop_wrap fn_hide">
       <div class="pop">
           <a href="" class="close">×</a>
           <p class="title">密码验证</p>
           <input type="text" placeholder="请输入密码">
           <p class="tar"><a href="" class="certain">确认</a></p>
       </div>
    </div>
</body>
</html>